<template>
    <div>
        <lbt></lbt>
        <!--关于我们-->
        <div class="wow" data-wow-delay="0.5s">
            <div class="container aboutus wow">'
                <h2 class="big-title">
                    <a href="javascript:;"></a>
                </h2>
                <div class="media">
                    <div class="hidden-xs hidden-sm media-left small-img-lbt">
                        <img src="../../assets/images/home/la_lbt.png" alt="">
                    </div>
                    <div class="media-body word-space">
                        <h4 class="media-heading">
                            蜀帅 麻辣香锅 隶属于杭州味捷品牌集团
                        </h4>
                        <p>蜀帅麻辣香锅隶属于杭州味捷品牌集团。味捷集团在中式快餐外卖领域精耕细作近10年，
                            拥有专业的管理团队、营销中心、研发中心、配送中心、话务中心等9大中心和3大事业
                            部，打造了完善的餐饮连锁经营体系，专业、专心、专注为客户服务。</p>
                        <p>研发、生产、仓储、配送于一体，中央大厨房标准化生产，杜绝人工污染！</p>
                        <div class="store">
                            <span>味捷工厂</span>
                            <span>1.2万m²</span>
                        </div>
                        <div class="store">
                            <span>集团品牌门店</span>
                            <span>1000+</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--more-->
        <div class="wow">
            <router-link to="/about" tag="button" class="more-btn wow">
                more
            </router-link>


            <!--产品系列-->
            <div class="wow">
                <div class="container product wow">
                    <h2 class="big-title">
                        <a href="javascript:;"></a>
                    </h2>
                </div>
            </div>

            <!--产品图片-->
            <div class="product-lbt container">
                <!--pc sanggelbt组件-->
                <sangelbt></sangelbt>

            </div>
        </div>

        <div class="wow">
            <!--more-->
            <router-link to="/product" tag="button" class="more-btn">
                more
            </router-link>
        </div>

        <div class="wow">
            <!--品牌实力-->
            <div class="brand">
                <!--合照部分-->
                <div class="together-photo">
                    <h2 class="big-title">
                        <a href="javascript:;"></a>
                    </h2>
                </div>

                <!--八宫格-->
                <div class="eight-box">
                    <img src="../../assets/images/home/eight.png" alt="">
                </div>
            </div>
        </div>

        <!--加盟案例-->
        <div class="join">
            <!--大标题-->
            <h2 class="big-title hidden-sm hidden-xs">
                <a href="javascript:;"></a>
            </h2>

            <!--大的图片群-->
            <div class="join-img-box container">
                <div class="one">
                    <img src="../../assets/images/home/join_left.png" alt="" width="374" height="362">
                </div>
                <div class="two">
                    <img src="../../assets/images/home/join_top.png" alt="" width="378" height="178">
                    <img src="../../assets/images/home/join_bottom.png" alt="" width="378" height="178">
                </div>
                <div class="three">
                    <img src="../../assets/images/home/join_right.png" alt="" width="233" height="360">
                </div>
            </div>

            <!--加盟有话说-->
            <div class="join-talk container">
                <div class="">
                    <!--左边-->
                    <div class="join-talk-left wow fadeInLeft">
                        <img src="../../assets/images/home/join_talk_word.png" alt="">
                    </div>
                </div>

                <div class="">
                    <!--右边-->
                    <div class="join-talk-right wow fadeInRight">
                        <img src="../../assets/images/home/join_talk_person.png" alt="">
                    </div>
                </div>
            </div>

            <!--陪你麻辣 大的-->
            <div style="padding-top: 100px;padding-bottom: 100px" class="">
                <div class="with">
                    <img src="../../assets/images/home/penimala_out.png" alt="">
                </div>
            </div>
        </div>

        <!--新闻资讯-->
        <div class="news">
            <h2 class="big-title">
                <a href="javascript:;"></a>
            </h2>
            <!--上部有信息的 pc-->
            <div class="fresh container">
                <div class="fresh-left"></div>
                <div class="fresh-right clearfix wow ">
                    <div class="text-left wow slideInLeft" v-for="(item,index) in newsData" :key="index">
                        <p>{{ item.title }}</p>
                        <hr>
                        <p id="text-pc">{{ item.content | slh(55) }}</p>
                    </div>
                    <div class="text-right wow ">
                        <div class="text-right-top">
                            <p class="iconfont">&#xe693;</p>
                            <p>
                                <span>123</span>
                                <span>人</span>
                            </p>
                            <p>浏览</p>
                        </div>
                        <div class="text-right-bottom">
                            <p>
                                <Icon type="md-heart"/>
                            </p>
                            <p>
                                <span>321</span>
                                <span>人</span>
                            </p>
                            <p>点赞</p>
                        </div>

                    </div>
                </div>
            </div>
            <!--文字新闻版块-->
            <div class="news-title container wow" id="news-title">
                <Tabs value="name1">
                    <TabPane label="" name="name1">

                        <router-link to="/news/newsinfo" tag="div" class="clearfix news-label-box"
                                     v-for="(item,index) in newsBoxData" :key="index">
                            <!--左边-->
                            <div class="news-left">
                                <!--上边-->
                                <div class="news-left-top">
                                    <span>{{ item.title }}</span>
                                    <span>{{ item.date | getTime("YYYY-MM-DD") }}</span>
                                </div>
                                <!--下边-->
                                <div class="news-left-bottom pc-text">{{ item.content | slh(43) }}</div>
                            </div>
                            <!--右边-->
                            <div class="news-right">

                            </div>
                        </router-link>
                    </TabPane>
                    <TabPane label="" name="name2">

                    </TabPane>
                    <TabPane label="" name="name3">

                    </TabPane>
                    <TabPane label="" name="name4">

                    </TabPane>
                </Tabs>
            </div>
        </div>
        <!--more-->
        <!--<router-link tag="button" to="/news" class="more-btn">-->
        <!--more-->
        <!--</router-link>-->

        <commonfooter></commonfooter>
    </div>
</template>

<script>
    import Swiper from "swiper"
    import lbt from "@/components/lbt/biglbt"
    import sangelbt from "@/components/lbt/sangelbt"
    import commonfooter from "@/components/footerCom/homeFooter"


    export default {
        data() {
            return {
                d1: 1,
                d2: 2,
                newsWord: "现在的餐饮业非常的广泛、涉及众多、涵盖了全国各地的各种特色美食，也是各个地方的不可缺少的行业45454545454545454545",
                // 模拟底部新闻版块数据
                newsBoxData: [
                    {
                        id: 1,
                        title: "麻辣香锅加盟 在餐饮业的前景怎么样？",
                        content: "现在的餐饮业非常的广泛、涉及众多、涵盖了全国各地的各种特色美食，也是各个地方的不可缺少的行业45454545454545454545",
                        date: "2019.03.14"
                    },
                    {
                        id: 2,
                        title: "麻辣香锅加盟 在餐饮业的前景怎么样？",
                        content: "现在的餐饮业非常的广泛、涉及众多、涵盖了全国各地的各种特色美食，也是各个地方的不可缺少的行业45454545454545454545",
                        date: "2019.03.14"
                    },
                    {
                        id: 3,
                        title: "麻辣香锅加盟 在餐饮业的前景怎么样？",
                        content: "现在的餐饮业非常的广泛、涉及众多、涵盖了全国各地的各种特色美食，也是各个地方的不可缺少的行业45454545454545454545",
                        date: "2019.03.14"
                    },
                ],
                // 模拟新闻资讯数据
                newsData: [
                    {
                        id: 1,
                        title: "麻辣香锅加盟 在餐饮业的前景怎么样？",
                        content: "有很多的投资者都会首先想到要把自己的麻辣香锅加盟店开在人流量比较大的商业街、步行街，但是他们忽视了选址",
                        date: "2019.03.14"
                    },
                ]
            }
        },
        methods: {
            // 判断当前盒子是否到达可视区域
            // canSee() {
            //     var element = $('.join-talk');
            //     var win = $(window);
            //     win.scroll(function () {
            //         if (element.offset().top + element.height() <= win.height() + win.scrollTop() + 200) {
            //             // element.addClass("animated bounceInLeft")
            //             // element.addClass('animated fadeInDown');
            //             // element.addClass("wow fadeInDown")
            //         } else {
            //             console.log("没到")
            //         }
            //     })
            // },

        },
        beforeMount() {
        },
        mounted() {
            // this.canSee();

        },
        created() {

        },
        components: {
            lbt,
            sangelbt,
            commonfooter
        }
    }
</script>

<style lang="less">
    .animated {
        /*transition-duration: 1.5s!important;*/
        /*transition-timing-function: ease!important;*/
        /*animation-iteration-count: 1!important;*/

    }

    /*关于我们*/
    .aboutus {
        h2 {
            text-align: center;
            height: 129px;
            /*margin-bottom: 40px;*/

            a {
                width: 100%;
                height: 100%;
                display: block;
                background: url("../../assets/images/home/aboutus.png") no-repeat center center;
            }
        }

        /*在小屏幕时显示的图片*/

        .word-space {
            padding-top: 16px;
            @media (max-width: 992px) {
                h4 {
                    text-align: left;
                }
            }

            h4 {
                font-size: 26px;
                line-height: 55px;
                color: #333;
            }

            p {
                &:nth-of-type(1) {
                    color: #333;
                    font-size: 18px;
                    margin-bottom: 26px;
                    line-height: 33px;
                }

                &:nth-of-type(2) {
                    color: #666;
                    font-size: 16px;
                    line-height: 20px;
                    margin-bottom: 25px;
                }
            }

            div.store {
                display: inline-block;

                &:nth-of-type(1) {
                    margin-right: 61px;
                }

                span {
                    &:nth-of-type(1) {
                        font-size: 18px;
                        margin-right: 21px;
                        color: #333;
                    }

                    &:nth-of-type(2) {
                        font-size: 28px;
                        font-weight: 600;
                        text-align: justify;
                        word-break: break-all;
                        color: #333;
                    }
                }
            }
        }
    }

    /*more按钮*/
    .more-btn {
        display: block;
        width: 146px;
        height: 46px;
        border-radius: 23px;
        border: solid 1px #ff0000;
        background-color: transparent;
        font-size: 22px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 27px;
        color: #ff0000;
        margin: 50px auto;

        &:hover {
            background-color: #ff0000;
            color: #f3f8f1;
        }
    }

    /*产品系列*/
    .product {
        h2.big-title {
            text-align: center;
            height: 129px;
            margin-bottom: 40px;

            a {
                width: 100%;
                height: 100%;
                display: block;
                background: url("../../assets/images/home/product.png") no-repeat center center;
            }
        }

        h2.sm-title {
            text-align: center;
            height: 129px;
            /*margin-bottom: 40px;*/

            a {
                width: 100%;
                height: 100%;
                display: block;
                background: url("../../assets/images/home/product-small.png") no-repeat center center;
            }
        }
    }

    /*产品轮播图*/
    .product-lbt {
        margin-bottom: 45px;
    }

    /*品牌实力*/
    .brand {
        /*height: 724px;*/
        /*background-color: #2aabd2;*/
        /*合照部分*/

        .together-photo {
            background-color: #0f0f0f;
            height: 410px;
            background: url("../../assets/images/home/together_photo.png") center center;
            background-size: cover;
            padding-top: 60px;

            .big-title {
                display: block;
                width: 151px;
                height: 70px;
                margin: 0 auto 60px auto;

                a {
                    display: block;
                    width: 100%;
                    height: 100%;
                    background: url("../../assets/images/home/strong.png");
                }
            }
        }

        /*八宫格*/

        .eight-box {
            width: 1101px;
            margin: -225px auto 0 auto;

            img {
                width: 100%;
                display: block;
            }
        }

        /*移动端四张图片*/

        .eight-box-small {
            ul {
                width: 260px;
                margin: -260px auto 0 auto;

                li {
                    margin-bottom: 5px;
                }
            }
        }
    }

    /*加盟案例*/
    @media (min-width: 992px) {
        .join {
            margin-bottom: 100px;
        }
    }

    @media (max-width: 768px) {
        .join {
            margin-bottom: 30px;
        }
    }

    .join {
        /*background-color: pink;*/
        margin-top: 35px;

        .big-title {
            height: 121px;
            margin: 0 auto 58px auto;

            a {
                display: block;
                width: 100%;
                height: 100%;
                background: url("../../assets/images/home/join_case_big.png") no-repeat center center;
            }
        }

        .small-title {
            width: 154px;
            height: 70px;
            margin: 0 auto;

            a {
                display: block;
                width: 100%;
                height: 100%;
                background: url("../../assets/images/home/join-case.png");
            }
        }

        /*大的*/

        .join-img-box {
            width: 1045px;
            margin: 0 auto 100px auto;
            display: flex;
            justify-content: center;
            /*左边*/

            .one {
                flex: 1;
            }

            .two {
                flex: 1;
            }

            .three {
                flex: 1;
            }
        }

        /*小的*/

        .join-img-box-small {
            .one,
            .two,
            .three {
                img {
                    width: 100%;
                    height: 100%;
                    display: block;
                }
            }

            .three {
                img {
                    margin-left: 10px;
                }
            }
        }

        /*加盟有话说*/

        .join-talk {
            /*background: #2aabd2;*/
            height: 500px;
            padding: 0;
            position: relative;
            margin-bottom: 100px;

            .join-talk-left {
                width: 675px;
                height: 500px;
                /*background: #4cae4c;*/
                position: absolute;
                left: 0;

                img {
                    width: 100%;
                    display: block;
                }
            }

            .join-talk-right {
                width: 491px;
                height: 370px;
                /*background-color: #204d74;*/
                position: absolute;
                right: 50px;
                top: 59px;

                img {
                    width: 100%;
                    display: block;
                }
            }
        }

        /*有话说移动端*/

        .join-talk-small {
            width: 100%;
            margin-top: 30px;
            padding: 0;

            .join-talk-top {
                padding: 0 59px 10px 57px;

                h2 {
                    font-size: 26px;
                    font-weight: normal;
                    font-stretch: normal;
                    letter-spacing: 3px;
                    color: #333333;
                    margin-bottom: 15px;
                }

                p {
                    font-size: 15px;
                    font-weight: normal;
                    font-stretch: normal;
                    line-height: 20px;
                    color: #333333;
                    letter-spacing: 0.2em;
                    text-align: left;
                }
            }

            .join-talk-bottom {
                padding-left: 10px;
                padding-right: 10px;

                img {
                    width: 100%;
                    height: 100%;
                    display: block;
                }
            }
        }

        /*陪你麻辣*/

        .with {
            height: 260px;
            background: url("../../assets/images/home/penimala_back.png") no-repeat center center;
            background-size: cover;
            position: relative;

            img {
                width: 1201px;
                height: 641px;
                display: block;
                position: absolute;
                top: 50%;
                left: 51%;
                margin-top: -260px;
                margin-left: -600px;
                cursor: pointer;
                /*transform: translate(-50%, -50%);*/

                &:hover {
                    transform: scale(1.01);
                }
            }
        }

        /*陪你麻辣  小的*/

        .with-small {
            padding-left: 10px;
            padding-right: 10px;

            img {
                width: 100%;
                height: 100%;
                display: block;
            }
        }
    }

    /*新闻资讯*/
    .news {
        margin-top: 20px;

        h2 {
            width: 155px;
            height: 70px;

            a {
                width: 100%;
                height: 100%;
                display: block;
                background: url("../../assets/images/home/news_title.png") no-repeat center center;
            }
        }

        @media (min-width: 992px) {
            h2 {
                margin: 0 auto 96px auto;
            }
        }
        @media (max-width: 768px) {
            h2 {
                margin: 0 auto 50px auto;
            }
        }
        /*上部有信息的  pc*/

        .fresh {
            height: 250px;
            /*background-color: #a6e1ec;*/
            position: relative;

            .fresh-left {
                width: 732px;
                height: 228px;
                background: url("../../assets/images/home/news_title_left.png");
                background-color: #204d74;
                position: absolute;
                left: 0;
            }

            .fresh-right {
                width: 600px;
                height: 180px;
                background-color: #fff;
                position: absolute;
                right: 0;
                top: 23px;

                .text-left {
                    width: 508px;
                    height: 100%;
                    /*background-color: #4cae4c;*/
                    float: left;
                    padding: 30px 70px 30px 65px;

                    p {
                        &:nth-of-type(1) {
                            font-size: 24px;
                            font-weight: normal;
                            font-stretch: normal;
                            line-height: 27px;
                            color: #333333;
                        }

                        &:nth-of-type(2) {
                            font-size: 12px;
                            font-weight: normal;
                            font-stretch: normal;
                            line-height: 27px;
                            color: #666666;
                            /*white-space: nowrap; !*保证文本内容不会自动换行，如果多余的内容会在水平方向撑破单元格。*!*/
                            overflow: hidden; /*隐藏超出单元格的部分。*/
                            text-overflow: ellipsis; /*将被隐藏的那部分用省略号代替。*/
                        }
                    }

                    hr {
                        margin: 15px auto;
                        border: 1px dashed #c8c8c8;
                    }
                }

                .text-right {
                    width: 92px;
                    height: 100%;
                    background: url("../../assets/images/home/orange_all.png") no-repeat center center;
                    float: right;

                    .text-right-top {
                        width: 92px;
                        height: 90px;
                    }

                    .text-right-bottom {
                        width: 92px;
                        height: 90px;
                    }

                    .text-right-top,
                    .text-right-bottom {
                        text-align: center;
                        font-size: 14px;
                        font-weight: normal;
                        font-stretch: normal;
                        line-height: 27px;
                        color: #ffffff;

                        p {
                            &:nth-of-type(1) {
                                font-size: 20px;
                            }
                        }
                    }
                }
            }
        }

        /*上部有信息的  移动*/

        .fresh-small {
            width: 300px;
            height: 330px;
            background-color: #fff;
            /*background-color: pink;*/
            padding: 0;

            .fresh-top {
                /*background-color: #ae99a6;*/
                padding: 10px;

                p {
                    color: #333;

                    &:nth-of-type(1) {
                        font-size: 20px;
                        color: #333333;
                        padding-left: 10px;
                        margin-top: 10px;
                    }

                    &:nth-of-type(2) {
                        padding-left: 10px;
                        font-size: 14px;
                        line-height: 28px;
                    }
                }

                hr {
                    margin: 23px auto;
                }
            }

            .fresh-bottom {
                width: 184px;
                margin: 25px auto 0 auto;

                .text-right-left {
                    float: left;
                    width: 92px;
                    height: 90px;
                    background-color: #ff7a0e;
                    box-shadow: 16px 0px 29px 0px #cd6c04;
                }

                .text-right-right {
                    float: right;
                    width: 92px;
                    height: 90px;
                    background-color: #ff7a0e;
                    box-shadow: 0px 0px 29px 0px #ea8a01;
                }

                .text-right-left,
                .text-right-right {
                    text-align: center;
                    font-size: 14px;
                    font-weight: normal;
                    font-stretch: normal;
                    line-height: 27px;
                    color: #ffffff;

                    p {
                        color: #fff;

                        &:nth-of-type(1) {
                            font-size: 20px;
                        }
                    }
                }
            }
        }

        /*很多文字信息*/

        .news-title {
            /*当屏幕宽度最小为992px时，ul的左外边距为60px*/
            @media (min-width: 992px) {
                ul {
                    margin-left: 60px;
                }
            }

            ul {
                margin-top: 60px;
                position: relative;
                @media (min-width: 992px) {
                    li {
                        margin-bottom: 30px;
                        width: 500px;
                    }
                }
                @media (max-width: 768px) {
                    li {
                        margin-bottom: 30px;
                        width: 320px;
                    }
                }

                li {
                    height: 134px;
                    float: left;

                    &:hover {
                        background: url("../../assets/images/home/news_hover_bac.png") no-repeat center center;
                    }

                    /*左边日期*/

                    .news-date {
                        padding-top: 20px;
                        display: inline-block;

                        p {
                            line-height: 35px !important;

                            &:nth-of-type(1) {
                                font-size: 45px;
                                font-weight: normal;
                                font-stretch: normal;
                                line-height: 27px;
                                color: #333333;
                                opacity: 0.9;
                                text-align: left;
                            }

                            &:nth-of-type(2) {
                                font-size: 20px;
                                font-weight: normal;
                                font-stretch: normal;
                                line-height: 27px;
                                color: #333333;
                                opacity: 0.9;
                                text-align: left;
                                padding-left: 10px;
                            }
                        }
                    }

                    /*右边新闻*/
                    /*当屏幕宽度最小是992px时，右边新闻的左外边距为35px*/
                    @media (min-width: 992px) {
                        .news-news {
                            margin-left: 35px;
                        }
                    }
                    /*当屏幕宽度最大是768px时，右边新闻的左外边距为10px*/
                    @media (max-width: 768px) {
                        .news-news {
                            margin-left: 10px;
                        }
                    }

                    .news-news {
                        /*height: 100%;*/
                        display: inline-block;

                        p {
                            &:nth-of-type(1) {
                                margin-top: 20px;
                                font-size: 20px;
                                font-weight: normal;
                                font-stretch: normal;
                                line-height: 27px;
                                color: #333333;
                            }

                            &:nth-of-type(2) {
                                font-size: 12px;
                                font-weight: normal;
                                font-stretch: normal;
                                line-height: 27px;
                                color: #333333;
                                opacity: 0.5;
                            }
                        }
                    }
                }
            }
        }
    }

    /*新的  pc*/
    .ivu-tabs-tab.ivu-tabs-tab-active.ivu-tabs-tab-focused {
        border-bottom: 2px solid #a30808 !important;
        /*box-shadow: 2px 6px 24px 6px*/
        /*rgba(0, 0, 0, 0.15)!important;*/
    }

    .news-title {
        padding: 0;
        margin-top: 100px;
        width: 1040px;
        background-color: #ffffff;
        box-shadow: 0px 6px 23px 1px #cbcbcb;

        .ivu-tabs-nav-scroll {
            .nav-text {
                /*margin-left: 100px;*/

                .ivu-tabs-tab {
                    padding: 0;
                    margin-right: 0;
                    width: 260px;
                    height: 78px;
                    text-align: center;
                    line-height: 78px;
                }
            }
        }

        .ivu-tabs-nav-prev,
        .ivu-tabs-nav-next {
            display: none;
        }

        .ivu-tabs-tab.ivu-tabs-tab-active.ivu-tabs-tab-focused {
            box-shadow: 2px 0px 24px 6px rgba(0, 0, 0, 0) !important;
        }

        .ivu-tabs-ink-bar.ivu-tabs-ink-bar-animated {
            display: none;
        }

        .nav-text.ivu-tabs-nav {
            background-color: #fff;
            div.ivu-tabs-tab {
                border-bottom: 2px solid #eaeaea;
                margin-bottom: 0;

                &:nth-of-type(2) {
                    background: url("../../assets/images/home/hangyezixun.png");
                    background-size: cover;
                }

                &:nth-of-type(3) {
                    background: url("../../assets/images/home/pinpaidongtai.png");
                    background-size: cover;
                }

                &:nth-of-type(4) {
                    background: url("../../assets/images/home/jingyingjiqiao.png");
                    background-size: cover;
                }

                &:nth-of-type(5) {
                    background: url("../../assets/images/home/jiamengwenda.png");
                    background-size: cover;
                }
            }
        }

        .ivu-tabs-nav-container:focus .ivu-tabs-tab-focused {
            border-color: transparent !important;
            box-shadow: 2px 6px 24px 6px rgba(0, 0, 0, 0.15);
        }

        .ivu-tabs-nav-container:focus .ivu-tabs-tab-focused {
            border-color: transparent !important;
        }

        .ivu-tabs-bar {
            border: 0;
            margin-bottom: 0;
        }

        .ivu-tabs-tabpane {
            /*padding: 35px 60px;*/
            padding-left: 60px;
            padding-right: 60px;
            padding-top: 19px;
            padding-bottom: 35px;
            /*background-color: pink;*/

            .news-label-box {
                margin-top: 20px;

                .news-left {
                    cursor: pointer;
                    float: left;
                    /*background-color: #4cae4c;*/
                    /*上边*/

                    .news-left-top {
                        span {
                            &:nth-of-type(1) {
                                font-size: 22px;
                                font-weight: normal;
                                font-stretch: normal;
                                line-height: 44px;
                                color: #333333;
                            }

                            &:nth-of-type(2) {
                                font-size: 14px;
                                font-weight: normal;
                                font-stretch: normal;
                                line-height: 27px;
                                letter-spacing: 0px;
                                color: #999999;
                                margin-left: 22px;
                            }
                        }
                    }

                    /*下边*/

                    .news-left-bottom {
                        font-size: 16px;
                        font-weight: normal;
                        font-stretch: normal;
                        line-height: 27px;
                        color: #999999;
                    }
                }

                .news-right {
                    width: 118px;
                    height: 74px;
                    float: right;
                    background-color: #66512c;
                }
            }
        }

        .ivu-tabs-nav-container:focus.ivu-tabs-tab-focused {
            box-shadow: none;
        }
    }

    /*新的  移动*/
    .news-title-small {
        padding-left: 20px;
        padding-right: 20px;
        margin-top: 20px;
        height: 1000px;
        /*background-color: #aeae3b;*/

        .ivu-tabs-nav-prev,
        .ivu-tabs-nav-next {
            display: none;
        }

        /*标签每一项*/

        .ivu-tabs-tab {
            margin: 0;
            font-size: 16px;
            padding: 0;
            padding-bottom: 10px;
            flex: 1;
            text-align: center;
        }

        /*选中项底部框框颜色*/

        .ivu-tabs-ink-bar {
            display: none;
            background-color: #a30808;
        }

        .nav-text.ivu-tabs-nav {
            width: 100%;
            display: flex;
            justify-content: center;
        }

        .ivu-tabs-nav,
        .ivu-tabs-tab-active {
            color: #333;
        }

        .ivu-tabs-tab:hover {
            color: #a30808 !important;
        }

        .news-title-small-box {
            margin-top: 15px;
            /*上边*/

            .news-title-small-box-top {
                display: flex;
                justify-content: center;

                div {


                    &:nth-of-type(1) {
                        flex: 1;
                        background-color: #66afe9;
                        margin-right: 15px;
                    }

                    &:nth-of-type(2) {
                        flex: 2;
                        width: 215px;
                        font-size: 14px;

                        @media (min-width: 424px) {
                            p {
                                &:nth-of-type(2) {
                                    margin-top: 15px;
                                }
                            }
                        }

                        p {
                            color: #333;

                            &:nth-of-type(1) {
                                font-weight: 700;
                            }

                            &:nth-of-type(2) {
                                /*margin-top: 15px;*/
                            }
                        }
                    }
                }
            }
        }
    }

    .ivu-tabs-tab.ivu-tabs-tab-active.ivu-tabs-tab-focused {
        border-bottom: 0 !important;
        /*border-bottom-color: transparent!important;*/
    }

    .nav-text.ivu-tabs-nav {
        padding-bottom: 27px;
    }

    #news-title {
        .ivu-tabs-tab.ivu-tabs-tab-active.ivu-tabs-tab-focused {
            /*box-shadow: 0 2px 24px rgba(0, 0, 0, 0.15) !important;*/
            box-shadow: 9px 0 30px rgba(0, 0, 0, 0.15) !important;
            transform: translateY(-1px);
            position: relative;
            z-index: 99;

            &:after {
                content: "";
                position: absolute;
                height: 100%;
                width: 36px;
                right: -38px;
                top: -2px;
                background-color: #fff;
            }
        }
    }
</style>
